<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用人单位信息</title>
    <link rel="stylesheet" href="../../plugins/element-ui/theme-chalk/index.css"/>
    <script src="../../js/vue.js" charset="utf-8"></script>
    <script src="../../plugins/element-ui/index.js" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios.min.js"></script>

    <script src="../../js/request.js"></script>
    <script src="../../js/employers.js"></script>

    <style name="table">
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>

<div id="container">
    <!--搜索表单    -->
    <el-form :inline="true" :model="employer" class="demo-form-inline">
        <el-form-item label="单位名">
            <el-input v-model="employer.name" placeholder="单位名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

<!--岗位信息-->
        <el-dialog title="岗位招聘信息" :visible.sync="dialogTableVisible">
            <el-table :data="positionData">
                <el-table-column property="id" label="岗位编号" width="70"></el-table-column>
                <el-table-column property="name" label="岗位名" width="90"></el-table-column>
                <el-table-column property="salary" label="薪资" width="70"></el-table-column>
                <el-table-column property="technologyStack" label="技术栈" width="90"></el-table-column>
                <el-table-column property="ageLimit" label="年龄限制" width="90"></el-table-column>
                <el-table-column property="academicRequirements" label="学历要求" width="90"></el-table-column>
                <el-table-column property="spareNumber" label="剩余招聘人数" width="90"></el-table-column>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="send(scope.row)">发送简历</el-button>
                    </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
            </div>
        </el-dialog>


    <!--table表格 -->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="name"
                    label="单位名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="所在城市"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="联系地址"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="size"
                    label="规模"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    align="center">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                <el-row>
                <el-button type="primary"  @click="look(scope.row)">查看招聘信息</el-button>
                </el-row>
                </template>
            </el-table-column>
        </el-table>
    </template>


</div>

<script>
    new Vue({
        el:"#container",
        methods: {
            //使不同行颜色不同
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

            selectAll(){
                list().then(res => {
                    if (String(res.code) === '1') {
                        this.tableData=res.data;
                    } else {
                        this.$message.error(res.msg || '查询失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },

            //点击查询后执行
            onSubmit() {
                queryEmployer(this.employer).then(function (res) {
                    this.tableData=res.data;
                }).then(res=> {
                    //判断响应数据是否为success
                    if(String(res.code) === "1"){
                        //提示消息
                        this.$message({
                            message: '查询成功！',
                            type: 'success'
                        })
                    }
                })
            },
            //查看岗位招聘信息
            look(row){
                this.resume.employerName=row.name;
                this.employerName=row.name;
                //显示表单
                this.dialogTableVisible = true;
                //获取该单位岗位招聘信息
                getPosition(this.resume).then(res=> {
                    this.positionData=res.data;
                }).then(res=> {
                    //判断响应数据是否为success
                    if(String(res.code) === "1"){
                        //提示消息
                        this.$message({
                            message: '查询成功！',
                            type: 'success'
                        })
                    }
                })
            },
            //发送简历,数据中附带岗位名,单位名，对应学生简历中相同的进行操作
            send(row){
                this.resume.employerName=this.employerName;
                this.resume.position=row.name;
                send(this.resume).then(res=> {
                    //判断响应数据是否为success
                    if(String(res.code) === "1"){
                        this.dialogTableVisible = false;
                        //提示消息
                        this.$message({
                            message: '发送成功！',
                            type: 'success'
                        })
                    }
                })
            },

        },
        created() {
            this.resume.name=localStorage.getItem('user');
            this.selectAll();
        },
        data() {
            return {
                tableData: [],

                positionData:[],
                //用来暂存
                employerName:'',
                //单位模型数据
                employer:{
                    name:"",
                    size:"",
                    city:"",
                    address:"",
                    phone:"",
                },

                //简历模型数据
                resume:{
                    name:"",
                    //应聘岗位
                    position:"",
                    //毕业院校
                    graduation:"",
                    //技术栈
                    technologyStack:"",
                    status:'',

                    employerName:""
                },

                //默认查看岗位框显示状态
                dialogTableVisible: false,

            }
        }
    })
</script>
</body>
</html>